<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            border: 3px solid black;
            font-size: 28px;
            width: 600px;
        }
    </style>
    <meta charset="UTF-8" />
    <title>DOM概述</title>
</head>
<body>
        <!-- DOM 是JavaScript 操作网页的接口，全称为“文档对象模型”(Document Object Model)。
    它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作(比如对元素增删内容) -->
        <!-- 浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOMTree)。
    所有的节点和最终的树状结构，都有规范的对外接口 -->
        <!-- DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是JavaScript语法的一部分，
        但是DOM 操作是JavaScript最常见的任务，离开了 DOM，JavaScript 就无法控制网页。
    另一方面，JavaScript也是最常用于 DOM 操作的语言 -->
    <h2>节点</h2>
    <p>DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树)，就是由各种不同类型的节点组成.
        每个节点可以看作是文档树的一片叶子</p>
<div class="box1">
    <ul>
        <ul>
            <li>节点的类型</li>
        </ul>
            <li>Document:整个文档树的顶层节点</li>
            <li>DocumentType:doctype标签</li>
            <li>Element:x负的各种HTML标签</li>
            <li>Attribute:网页元素的属性(比如class="right")</li>
            <li>Text:标签之间或标签包含的文本</li>
            <li>Comment:注释</li>
            <li>DocumentFragment:文档的片段</li>
    </ul>
</div>
<div>
    <h3>Node.nodeType属性</h3>
        <h3>不同节点的nodeType属性值和对应的常量如下</h3>
        <ul>
            <li>文档节点document:9     对应常量Node.DOCUMENT NODE</li>
            <li>元素节点(element)1     对应常量Node.ELEMENT NODE</li>
            <li>属性节点(attr):2       对应常量Node.ATTRIBUTE_NODE</li>
            <li>文本节点(text):3       对应常量Node.TEXT NODE</li>
            <li>文档片断节点(DocumentFragment):11     对应常量Node.DOCUMENT_FRAGMENT_NODE</li>
        </ul>
</div>
<script>
    console.log(document);

    if(document.nodeType === 9){
        console.log("顶层节点");
    }
    
</script>
</body>